<template>
  <div class="Main">
    <!-- 侧边栏 -->
    <div
    :class="['sideBar',{active:sideBarStatu}]"
    >
      <div 
      class="bar" 
      v-for="(sideBar,index) in sideBarList"
      :key="sideBar">
        <div
        class="barHead barStick"
        @click="bindClickStickSelect"
        >
          <i v-if="index=='身份'" class="iconfont icon-shenfenzheng"></i>
          <i v-if="index=='行为'" class="iconfont icon-hangweiguanli"></i>
          <i v-if="index=='统计'" class="iconfont icon-tongjifenxi-xiangmubiaogetongji"></i>
          <text class="option" v-if="sideBarStatu==false">{{index}}</text>
        </div>
        <div class="barContent invisible">
          <router-link
          class="barStick"
          v-for="(stick,index) in sideBar"
          :key="stick"
          :to="stick">
            {{index}}
          </router-link>
        </div>
      </div>
    </div>
    <!-- 内容盒子 -->
    <div class="contentBox">
      <!-- 头部 -->
      <div class="header">
        <button 
        :class="['sideBarCtrl',{active:sideBarStatu}]"
        @click="sideBarStatuAlter">	
          <i class="iconfont icon-arrow-left-double-line"></i>
        </button>
        <div class="role">欢迎您，{{userStore.info.name}}</div>
      </div>
      <!-- 内容区 -->
      <div class="content">
        <div class="contentBox">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
export default{
    name:"Main",
    mounted(){
      document.title = '画廊商城后台';
    }
}
</script>


<script setup>
import {ref} from 'vue';
import {useRouter} from 'vue-router';
import useUser from '@/store/user.js';

//用户状态
const userStore = useUser();

//==========侧边栏=========
//侧边栏状态更改
const sideBarStatu = ref(true);
function sideBarStatuAlter(){
  sideBarStatu.value = !sideBarStatu.value;
}
//侧边栏导航地址列表
const sideBarList = {
  "身份":{
    "基本":"/Main/basic",
    "资质":"/Main/qualifications"
  },
  "行为":{
    "管理商品":"/Main/goods",
    "订单处理":"/Main/order",
    "查看评论":"/Main/comment"
  },
  "统计":{
    "库存":"/Main/store",
    "购买量":"/Main/buy",
    "出货量":"/Main/send"
  }
}
//选项下拉状态更改
function bindClickStickSelect(e){
  sideBarStatu.value = false;
  e.target.parentNode.children[1].classList.toggle("invisible");
}
</script>


<style scoped lang="scss">
  @import '../style/_theme.scss';
  @import '../style/_initGlobalStyle.scss';
  .Main{
    width: 100%;
    height: 100vh;
    display: flex;
    .sideBar{
      width: 15%;
      height: 100%;
      background-color: $MainSideBarBGC;
      transition:width 0.3s ease-in;
      .bar{
        background-color: white;
        .barStick{
          height: 3vw;
          text-align: center;
          line-height: 3vw;
          cursor: pointer;
        }
        .barHead{
          background-color: $MainSideBarBtnBGC;
          color: $MainSideBarTextColor;
          border-bottom: 0.1vw solid $LoginBtnActiveBgColor;
          font-weight: bold;
          .iconfont{
            font-size: 1.2vw;
            font-weight: normal;
            pointer-events: none;
          }
          .iconfont.icon-shenfenzheng{
            font-size: 0.9vw;
          }
          .option{
            display: inline-block;
            margin-left: 1vw;
            pointer-events: none;
          }
        }
        .barHead:hover{
          background-color: $LoginBtnActiveBgColor;
          color: rgb(241, 241, 241);
        }
        .barContent{
          overflow: hidden;
          .barStick{
            display: block;
            background-color: white;
            color: $MainSideBarBGC;
            text-decoration: none;
            border-bottom: 0.1vw solid $LoginBtnBgColor;
            border-left: 0.1vw solid $LoginBtnBgColor;
            border-right: 0.1vw solid $LoginBtnBgColor;
          }
          .barStick:hover{
            background-color: rgb(241, 241, 241);
            color:$LoginBtnActiveBgColor;
          }
        }
        .barContent.invisible{
          height: 0;
        }
      }
    }
    .sideBar.active{
      width: 5%;
    }
    .contentBox{
      width: 100%;
      height: 100%;
      background-color: $MainBGC;
      .header{
        width: 100%;
        height: 3vw;
        display: flex;
        align-items: center;
        box-shadow: 0.5vw 0.5vw 1vw 0.1vw rgb(240, 240, 240);
        border-top-right-radius: 1vw;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .sideBarCtrl{
          margin-left: 1vw;
          width: 1.5vw;
          height: 1.5vw;
          transition: transform 0.3s ease-in;
          border-radius: 0.5vw;
          border: none;
          background-color: $FocusColor;
          color: $StaticTextColor;
          box-shadow: 0 0 1vw 0.1vw rgb(219, 219, 219);
        }
        .sideBarCtrl.active{
          transform: rotate(180deg);
        }
        .role{
          font-size: 70%;
          margin-right: 1vw;
        }
      }
      .content{
        margin-top:1vw;
        width: 100%;
        height: 90%;
        display: flex;
        justify-content: end;
        align-items: center;
        .contentBox{
          width: 98%;
          height: 98%;
          box-shadow: 0 0 1vw 0.1vw rgb(240, 240, 240);
        }
      }
    }
  }
</style>
